<template>
	<view v-if="pageShow" class="container">
		<scroll-view scroll-y="true" style="height: 100%;" refresher-threshold="50" :refresher-background="'#F7F7F7'"
			:refresher-enabled="true" :refresher-triggered="isRefreshing" @refresherrefresh="refresherrefresh"
			@scrolltolower="loadMore">
			<view class="my-collect">
				<view class="collect-item solid-bottom" v-for="(item, index) in collectList" :key="index" @click="goShopDetail(item)">
					<view class="content">
						<view class="content-pic">
							<image :src="item.pic[0]" class="pic" mode="aspectFill"></image>
						</view>
						<view class="info">
							<text class="name">{{item.name}}</text>
							<text class="price">{{item.price==0?'面议': '¥' + item.price}}</text>
						</view>
					</view>
					<view class="bottom-btn">
						<view class="btn" @click.stop="cancelCollect(item)">
							取消收藏
						</view>
					</view>
				</view>
				<uni-load-more v-if="collectList.length > 0" :status="listStatus"></uni-load-more>
				<view v-if="collectList.length === 0" class="empty-wrap" >
				  <image class="empty-img" src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png"></image>
				  <text class="tips">暂无内容</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>

	import homeApi from "@/api/home.js"
	import personalApi from "@/api/personal.js"
	export default {
		data() {
			return {
				collectList: [],
				//分页参数
				pageShow: false,
				page: 1,
				pageSize: 10,
				isRefreshing: false,
				listStatus: 'nomore',
				type: 13
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getList()
		},
		methods: {
			async getList() {
				this.listStatus = 'loading'
				uni.showLoading({
					title: '加载中'
				})
				let obj = {
					page: this.page,
					limit: this.pageSize,
					type: this.type
				}
				let res = await personalApi.getMyCollect(obj)
				if(res.code === 1) {
					let arr = []
					if (this.page == 1) {
						this.collectList = []
					}
					let newList = res.data.data
					if (newList.length >= this.pageSize) {
						this.listStatus = 'more'
					} else {
						this.listStatus = 'nomore'
					}
					let arr1 = arr.concat(newList)
					arr1.forEach(val => {
						let obj = {
							id: val.id,
							collect_id: val.collect_id,
							name: val.name,
							pic: val.pic.split(','),
							price: val.price
						}
						this.collectList.push(obj)
					})
					this.pageShow = true
					this.isRefreshing = false
					uni.hideLoading()
				}
			},
			
			//跳转商品详情
			goShopDetail(val) {
				uni.navigateTo({
					url: '/pagesShop/shopDetail/shopDetail?id=' + val.id
				})
			},
			
			
			//取消收藏
			cancelCollect(val) {
				let that = this
				uni.showModal({
					cancelColor: "#999",
					cancelText: '再想想',
					confirmColor: "#0177fd",
					confirmText: '确认取消',
					content: '确认取消收藏此商品吗？',
					success:function(ots){
						if(ots.confirm) {
							homeApi.setCollect({id: val.id, type: 13}).then(res => {
								if(res.code === 1) {
									that.$common.msgShow('取消收藏')
									that.getList()
								}else {
									that.$common.msgShow(res.msg)
								}
							})
						}
					}
				})
			},
			
			//下拉刷新
			refresherrefresh() {
				this.isRefreshing = true;
				this.page = 1
				this.getList()
			},
			
			//上拉加载
			loadMore() {
				if (this.listStatus == 'more') {
					this.page += 1
					this.getList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
 @import 'myCollect.scss';
</style>
